<template>
  <div>
    <!-- 顶部 -->
    <!-- <van-nav-bar title="订单详情" left-arrow @click-left="onClickLeft" /> -->
    <div class="zhiFu">
      <div class="kkyy">
        <p>
          <van-icon
            name="passed"
            size="30px"
            color="white"
            class="font"
          />待支付
        </p>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="Richard Fan   188***12138" label="河南省北京市" />
    </van-cell-group>
    <!-- 商品信息 -->
    <van-cell-group>
      <van-cell title="商品信息" />
    </van-cell-group>
    <van-card
      num="2"
      price="99"
      desc="统"
      title="金银花 统货 山西"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    />
    <van-cell-group>
      <van-cell title="订单信息" />
    </van-cell-group>
    <van-cell-group>
      <van-field label="商品合计" value="￥198.00" readonly />
      <van-field label="运费" value="￥0.00" readonly />
    </van-cell-group>
    <!-- 发票类型 -->
    <van-cell-group style="margin-top: 10px">
      <van-cell title="发票类型" value="电子纸质发票" />
      <van-cell title="发票抬头" value="Windir" />
      <van-cell title="发票类型" value="日用品" />
    </van-cell-group>
    <!-- 订单 -->
    <van-cell-group style="margin-top: 10px">
      <van-cell title="订单编号" value="11977240" />
      <van-cell title="提交时间" value="2017-05-01 16:00" />
      <van-cell title="支付方式" value="在线支付" />
    </van-cell-group>

    <div class="diBu">
      <p style="margin: auto; margin-left: 0px">
        <span>
          应付金额：
          <span style="color: red">￥180.00</span>
        </span>
      </p>
      <div>
        <van-button plain type="primary" size="mini" @click="show = true"
          >取消订单</van-button
        >
        <van-button plain type="info" size="mini">上传支付凭证</van-button>
      </div>
    </div>
    <van-action-sheet v-model="show">
      <van-nav-bar title="取消订单">
        <template #right>
          <van-icon name="cross" size="18" />
        </template>
      </van-nav-bar>
      <p>取消订单后，本单享有的优惠可能会一并取消，是否继？</p>
      <br />
      <p style="font-size: 10px; color: grey">请选择取消订单的原因(必选)</p>
      <div v-for="item in actions" :key="item.id">
        <van-checkbox icon-size="15px" v-model="item.name">{{
          item.neiRong
        }}</van-checkbox>
      </div>
      <!-- 按钮 -->
      <van-button type="primary" color="#7232dd" size="large" @click="fff"
        >确定</van-button
      >
    </van-action-sheet>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "WorkspaceJsonHome",

  data() {
    return {
      show: false,
      actions: [
        { name: "false", id: 2, neiRong: "配送信息有误" },
        { name: "false", id: 3, neiRong: "发票信息有误" },
        { name: "false", id: 4, neiRong: "忘记使用优惠券、优币等" },
        { name: "false", id: 5, neiRong: "配送信息有误" },
        { name: "false", id: 6, neiRong: "商品买错了" },
        { name: "false", id: 7, neiRong: "重复下单/误下单" },
      ],
      checked: "false",
    };
  },

  mounted() {},

  methods: {
    onClickLeft() {
      Toast("返回");
    },
    pdd() {},
    fff() {
      Toast({
        message: "订单已取消",
        icon: "passed",
      });
      this.$router.push("/xiangQingS");
    },
  },
};
</script>

<style lang="less" scoped>
.zhiFu {
  width: 100%;
  height: 80px;
  background: #1abc9c;
}
.kkyy {
  position: absolute;
  top: 70px;
  left: 30px;
  color: white;
}
.font {
  vertical-align: middle;
  margin-right: 5px;
}
.diBu {
  width: 100%;
  height: 30px;
  background: gainsboro;
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}
.content {
  padding: 16px 16px 160px;
}
.van-checkbox {
  font-size: 10px;
  color: grey;
  margin-bottom: 5px;
}
</style>